import React from "react";
import { STATUS, useXFVoice } from "./useXFVoice";

export interface XFVoiceProps {}

const statusText = {
  [STATUS.UNDEFINED]: "开始录音",
  [STATUS.OPEN]: "UNDEFINED",
  [STATUS.CLOSED]: "开始录音",
  [STATUS.CLOSING]: "关闭连接中",
  [STATUS.CONNECTING]: "建立连接中",
};
const XFVoice: React.FC<XFVoiceProps> = (props) => {
  const { recStatus, recText, recSec, triggerRecord } = useXFVoice();
  return (
    <div>
      浏览器录音听写：{recSec} s<h2 id="result">{recText}</h2>
      <button onClick={triggerRecord}>
        {statusText[recStatus] || "开始录音"}
      </button>
    </div>
  );
};

export default XFVoice;
